<template>
  <div class="container">
    <top-nav :toLastPath="true">招商合作</top-nav>
    <img src="http://file.rzkeji.com/web/recruit/advent/banner.jpg" class="tip"/>
    <div class="classify">
      <ul class="classify clearfix">
        <li v-for="(item,index) of typeList" :key="index" @click="getInformation('',item.id,index)">
          <!-- <router-link :to="{'path':'/work','query':{'type':1}}"> -->
            <img :src="item.img_url" class="slide-image"/>
            <div ><span :class="{activated:index==flag}">{{item.name}}</span></div>
          <!-- </router-link> -->
        </li>
      </ul>
    </div>
    <div class="search">
      <input placeholder="请输入职位名/公司关键字" @click="goSearch"/>
      <img src="http://file.rzkeji.com/web/recruit/icon/search.png"/>
    </div>
    <!-- <menu1></menu1> -->
    <div class="update" @click="update">点击刷新页面</div>
    <attractList></attractList>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
import {Toast} from 'vant'
import attractList from '@/components/attractList'
export default {
  data () {
    return {
      aa:false,
      typeList:'',
      flag:99
    }
  },
  computed:{
    
  },
  components: {
    attractList,
    topNav
  },

  methods: {
    async getInformation(all,classify,index){
      Toast.loading({
        mask: false,
        message: '加载中...'
      });
      let res=await this.$axios('/advert/getInvitingAdvert',{params:{type:all,classify_id:classify}});
      this.$store.dispatch('setDataList',res.data.data)
      this.flag=index
      Toast.clear()
    },
    goSearch(){
      this.$router.push('/search')
    },
    async getTypeList(){
      let res=await this.$axios('/advert/getTypeList')
      if(res.data.level=='success'){
        this.typeList=res.data.data
      }
    },
    update() {
      this.getInformation('all_list')
      this.flag=99
    },
  },
  mounted(){
    this.getTypeList()
  },
  activated(){
    this.getInformation('all_list')
  }
}
</script>

<style scoped>
.container{padding-top: 45px;}
.tip{width: 100%;height: 170px;}
.search{position: relative;margin-left: 7.25px;margin-right:7.25px;margin-bottom: 70px;}
.search input{transform: translateX(-50%);min-width: 90%;height:30px;line-height: 30px;position: absolute;left: 50%;top: 6.25px;background-color: #fff;border-radius: 10px;padding-left:20px;background-color: #f1f1f1;}
.search img{width: 20px;height: 20px;position: absolute;right: 10px;top: 10.25px;}



.classify{width: 100%;margin-top: 10px;}
.classify li{width: 25%;height: 80px;float: left;}
.classify li img{width: 50px;height: 50px;display: block;margin: 0 auto;}
.classify li div{width: 100%;height: 20px;line-height: 20px;text-align: center;font-size: 11.7px;color: #717171;}
.clearfix{
 overflow: hidden;
  zoom: 1;
}
.activated{
  border-bottom:3px solid #38B4DB;
}

.update{
  margin-top:20px;
  padding:10px 5px;
  font-size: 25px;
  background: #38B4DB;
  color:#fff;
  text-align: center;
  border-radius: 20px;
}
</style>
